<template>
	<view class="form-main">
		<u-form :model="form" ref="uForm" :error-type="['message']">
			<view class="form-column">
				<view class="form-title">院区信息</view>
				<view class="form-box">
					<u-form-item label="院区名称：" label-width="150rpx" prop="deptName" required>
						<u-input class="form-input" v-model="form.deptName" placeholder="请输入院区名称" />
					</u-form-item>
					<u-form-item label="年目标业绩：" label-width="180rpx" prop="nmb" required>
						<u-input class="form-input" v-model="form.nmb" placeholder="请输入年目标业绩" />
					</u-form-item>
					<u-form-item label="月目标业绩：" label-width="180rpx" prop="ymb" required>
						<u-input class="form-input" v-model="form.ymb" placeholder="请输入月目标业绩" />
					</u-form-item>
					<!-- <u-form-item label="院区地址：" label-width="150rpx" prop="address">
						<u-input class="form-input" v-model="form.address" placeholder="请输入院区地址" />
					</u-form-item> -->
				</view>
			</view>
		</u-form>
		<view class="u-margin-top-30" @click="submitAction">
			<animate-button ref="animeBtn" :btn-text="type == 0 ? '添加' : '修改'"></animate-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					deptName: '',
					nmb: '',
					ymb: '',
					address: '',
				},
				rules: {
					deptName: [
						{
							required: true,
							message: '请输入院区名称！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur']
						},
						
					],
					nmb: [
						{
							required: true,
							message: '请输入年目标业绩！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur']
						},
					],
					ymb: [
						{
							required: true,
							message: '请输入月目标业绩！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur']
						}
					]
				},
				id: null,
				type: null,
			};
		},
		onLoad() {
			const {
				type,
				id
			} = this.$Route.query;
			this.id = id;
			this.type = type;
			if (type == 1) {
				this.getDetail(id)
			}
			uni.setNavigationBarTitle({
				title: type == 0 ? '新增院区' : '编辑院区'
			})
		},
		methods: {
			getDetail(id) {
				this.$api.deptDetails({
					id
				}).then(res => {
					let d = res.data
					this.id = d.deptId
					this.form = {
						deptName: d.deptName,
						nmb: d.nmb,
						ymb: d.ymb,
						address: d.address,
					}
					// if (this.form.factoryImg) {
					// 	this.fileList = [{
					// 		"url": this.form.factoryImg,
					// 		"progress": 100,
					// 		"error": false
					// 	}]
					// }
				})
			},
			submitAction() {
				if (this.$refs.animeBtn.status != 1) return
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$refs.animeBtn.loading()
						let params = this.type == 0 ? {} : { deptId: this.id }
						this.$api.deptAddOrUpdate({
							...this.form,
							...params
						}).then(res => {
							this.$refs.animeBtn.success()
							this.$refs.uToast.show({
								title: this.type == 0 ? '添加成功' : '修改成功',
								type: 'success',
								back: true,
								duration: 1500,
								callback: () => {
									this.$fallback(1, {
										key: 'reset'
									})
								}
							});
						}).catch(() => {
							this.$refs.animeBtn.fail()
							setTimeout(()=> {
								this.$refs.animeBtn.reset()
							}, 3000)
						})
					} else {
						return
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>
